<template>
	<div style="max-width: 1200px;margin: 0 auto;">
		<div style="margin: 10px 0;padding-bottom: 50px;width: 100%;">
			<el-row :gutter="10">
				<el-col :lg="6" :md="12" :sm="12" :xm="24" v-for="e in listData" :key="e.id"
					style="margin-bottom: 10px;">
					<div style="border: 1px solid #ccc; padding-bottom: 10px">
						<img :src="e.img" alt="" style="width: 100%;height: 150px">
						<div style="padding: 5px;font-size: 16px;font-weight: bold;">考试题目：{{ e.name }}</div>
						<div style="padding: 5px" v-if="e.unify == '1'">考试类型：<span style="color:red;">统一开考</span></div>
						<div style="padding: 5px" v-else>考试类型：<span style="color:red;">非统一开考</span></div>
						<div style="padding: 5px">开始时间：{{ e.startTime }}</div>
						<div style="padding: 5px">结束时间：{{ e.endTime }}</div>
						<div style="padding: 5px">发布者：{{ e.user }}</div>
						<div style="padding: 5px;display: flex;flex-direction: row;justify-content: center;">
							<el-button :disabled="e.isExam==='已考试' || e.isExam==='考试未开始'" type="primary"
								@click="gotoExam(e.id,e.isExam)">
								{{e.isExam}}
							</el-button>
						</div>
					</div>
				</el-col>
			</el-row>
			<div style="margin-top: 20px">
				<el-pagination @current-change="currentChange" @size-change="sizeChange" :page-size="pageInfo.pageSize"
					:current-page="pageInfo.currentPage" background layout="sizes, prev, pager, next" :total="total">
				</el-pagination>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				//总条数
				total: 0,
				listData: [],
				flag: false,
				examType: '',
				//分页详情
				pageInfo: {
					//当前页
					pageNum: 1,
					//分页大小
					pageSize: 10,
					flag: false,
					isExamId: '',
				},
			}
		},
		created() {
			this.getPageList()
		},
		methods: {
			//获取分页数据
			getPageList() {
				this.$axios.get("/exam/page", {
					params: this.pageInfo
				}).then(res => {
					console.log('考试', res)
					this.listData = res.data.list
					this.total = res.data.total
					this.listData.forEach(item => {
						if (item.isExam == '已考试') {
							if (localStorage.getItem('startTime')) {
								localStorage.removeItem('startTime')
							}
							return
						}
					})
				})
			},
			gotoExam(id, isExam) {
				console.log(id, '考试id')
				let res = this.listData.find(obj => obj.isExam == '考试中')
				console.log(res, '这个？')
				if (res) {
					if (res.id == id) {
						this.$router.push({
							path: '/examination',
						})
					} else {
						this.$message.error('您有尚未完成的考试!')
					}
				} else {
					if (localStorage.getItem('startTime')){
						localStorage.removeItem('startTime');
					}
					localStorage.setItem('examID', id)
					// localStorage.setItem('isExam','立即考试')
					this.$router.push({
						path: '/instructions',
					})
				}
			},
			//选择分页
			currentChange(e) {
				this.pageInfo.pageNum = e
				this.getPageList()
			},
			//改变分页数量
			sizeChange(e) {
				this.pageInfo.pageSize = e
				this.getPageList()
				
			},
		}
	}
</script>
